<template>
  <div>
    <br />
    <br />
    <br />
    <h4 align="center">执行结果展示</h4>
    <section ref="pieChart" style="width: 100%;height:400px"></section>
    <!--列表-->
    <el-table
      :data="result"
      highlight-current-row
      v-loading="listLoading"
      @selection-change="selsChange"
      style="width: 100%;"
    >
      <!-- <el-table-column type="selection" min-width="5%">
                </el-table-column> -->

      <el-table-column prop="project_name" label="项目" min-width="12%">
      </el-table-column>
      <el-table-column prop="interface_pici" label="批次号" min-width="15%">
      </el-table-column>
      <el-table-column
        prop="interface_action_count"
        label="执行接口数"
        min-width="10%"
      >
        <template slot-scope="scope">
          <el-popover placement="top-start" width="600" trigger="hover">
            <p style="font-size:20px;color:#4C9FF8">
              批次号: {{ scope.row.interface_pici }}
            </p>
            <p style="font-size:15px;color:blue">
              执行接口名: {{ scope.row.interface_action_name }}
            </p>
            <p style="font-size:15px;color:green">
              成功接口名: {{ scope.row.interface_aciton_succcess_name }}
            </p>
            <p style="font-size:15px;color:red">
              失败接口名: {{ scope.row.interface_aciton_fail_name }}
            </p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="small"
                >{{ scope.row.interface_action_count }}
              </el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
        prop="interface_aciton_succcess_count"
        label="执行成功数"
        min-width="10%"
        @mouseover="showDetail"
      >
        <template slot-scope="scope">
          <el-popover placement="top-start" width="600" trigger="hover">
            <p style="font-size:20px;color:#4C9FF8">
              批次号: {{ scope.row.interface_pici }}
            </p>
            <p style="font-size:15px;color:blue">
              执行接口名: {{ scope.row.interface_action_name }}
            </p>
            <p style="font-size:15px;color:green">
              成功接口名: {{ scope.row.interface_aciton_succcess_name }}
            </p>
            <p style="font-size:15px;color:red">
              失败接口名: {{ scope.row.interface_aciton_fail_name }}
            </p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="small"
                >{{ scope.row.interface_aciton_succcess_count }}
              </el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="interface_aciton_fail_count"
        label="执行失败数"
        min-width="10%"
      >
        <template slot-scope="scope">
          <el-popover placement="top-start" width="600" trigger="hover">
            <p style="font-size:20px;color:#4C9FF8">
              批次号: {{ scope.row.interface_pici }}
            </p>
            <p style="font-size:15px;color:blue">
              执行接口名: {{ scope.row.interface_action_name }}
            </p>
            <p style="font-size:15px;color:green">
              成功接口名: {{ scope.row.interface_aciton_succcess_name }}
            </p>
            <p style="font-size:15px;color:red">
              失败接口名: {{ scope.row.interface_aciton_fail_name }}
            </p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="small"
                >{{ scope.row.interface_aciton_fail_count }}
              </el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="interface_res" label="执行结果" min-width="10%">
      </el-table-column>
      <el-table-column prop="case_type" label="用例分类" min-width="10%">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="执行时间"
        :show-overflow-tooltip="true"
        min-width="20%"
      >
      </el-table-column>

      <el-table-column label="操作" min-width="25%">
        <template slot-scope="scope">
          <!--跳转
                    <el-button plain size="small" type="info" @click="showDetail(scope.row)">执行详情</el-button>-->
          <!--弹窗-->
          <el-button
            plain
            size="small"
            type="primary"
            @click="handleResult(scope.$index, scope.row)"
            >结果详情
          </el-button>
          <!--
                    <router-link v-if="scope.row.status" :to="{ name: '项目概况', params: {project_id: scope.row.id}}" style="cursor:pointer;color: #0000FF;text-decoration:underline">
                        {{ scope.row.name }}
                    </router-link>


					<router-link :to="{ name: '新增接口', params: {project_id: this.$route.params.project_id}}" style='text-decoration: none;color: aliceblue;'>
						<el-button type="primary">新增</el-button>
					</router-link>-->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import echarts from "echarts";
import { getRunResultByPici } from "../../../../api/api";
export default {
  data() {
    return {
      result: [],

      totalCount: [],
      FailCount: [],
      SuccessCount: [],
      // pieEchartsData:[],
      pieEchartsData: {},
    };
  },
  mounted() {
    this.getResult();
  },
  created() {},
  methods: {
    /***自己的方法**/
    //getRunResultByPici
    getResult() {
      let self = this;
      let params = {
        pici: this.$route.params.pici,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getRunResultByPici(headers, params).then((_data) => {
        let { msg, code, data } = _data;
        if (code === "999999") {
          self.options = data;

          this.totalCount = data.data[0].interface_action_count;
          this.FailCount = data.data[0].interface_aciton_fail_count;
          this.SuccessCount = data.data[0].interface_aciton_succcess_count;

          this.pieEchartsData = {
            total_count: this.totalCount,
            data_list: [
              { legend_name: "成功", count: this.SuccessCount },
              { legend_name: "失败", count: this.FailCount },
            ],
          };

          this.drawPieChart(this.pieEchartsData);
          this.result = data.data;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    setColorArr() {
      const arr = ["#1fca3f", "#f90f1b"];
      return arr;
    },
    handleResult: function(index, row) {
      let pici = row.interface_pici;

      this.$router.push({ path: "/report_detail/pici=" + pici });
    },
    drawPieChart(item) {
      let pieData = [];
      // 将数据格式转换成echarts固定格式
      item.data_list.map((e) => {
        var temp = {};
        temp.value = e.count;
        temp.name = e.legend_name;
        pieData.push(temp);
      });
      let option = {
        //title: {
        //	text: '接口执行结果展示'
        //	  },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        graphic: {
          // 圆心中间文字
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "执行接口总数：" + item.total_count + "个",
            textAlign: "center",
            fill: "#000",
            width: 30,
            height: 30,
            fontSize: 12,
          },
        },
        color: this.setColorArr(),
        series: [
          {
            name: "执行结果",
            type: "pie",
            radius: ["50%", "70%"],
            label: {
              formatter: "{b}：{c}个  ({d}%)",
            },
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let pieChart = echarts.init(this.$refs.pieChart);
      pieChart.setOption(option, true);
      window.addEventListener("resize", function() {
        pieChart.resize();
      });
    },
  },
};
</script>
